<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./js/vue.js"></script>
<body>
    <div class="box">
        <h1>{{str}}</h1>
        <button @click="btn">把字符串变为大写</button>
        <h1 v-uc="str"></h1>
        <!-- <h1 v-lc="str1"></h1> -->
        <input type="text" v-focus>
    </div>
    <div class="app">
        <!-- <h1 v-uc="str"></h1> -->
        <!-- <h1 v-lc="str1"></h1> -->
    </div>
    <script>
        /* 
        案例： 字符串变为大写  toUpperCase
        不要使用事件完成该效果，要求 需要使用指令完成该效果

        没有 自己造
        自定义指令

        
        */
        // 全局指令
        Vue.directive('lc',{
            bind(el,binding){
                console.log(el);
                console.log(binding);
                el.innerText =  binding.value.toLowerCase();
            }
        })
        const vm = new Vue({
            el:'.box',
            data:{
                str:'jin tian tian qi zhen qing lang??',
                str1:"FAERGRGRGRG"
            },
            methods: {
                btn(){
                    // console.log('11');
                    console.log(this.str);
                    console.log(this.str.toUpperCase());
                    // 当操作完data中的数据之后，data中的值加入需要更改，你需要进行重新赋值
                    this.str = this.str.toUpperCase();
                }
            },
            // 只在当前vue实例当中创建，不能在其他的实例当中使用 局部指令
            directives:{
                // v-uc  
                uc:{
                    /* bind(el,binding,vnode){
                        console.log(el,binding,vnode);
                        el.innerText = binding.value.toUpperCase();
                    } */
                    // 还有其他很多的方法
                    // inserted
                    inserted(el,binding){
                        console.log(el);
                        console.log(binding);
                        el.innerText = binding.value.toUpperCase();
                    }
                },
                /* // v-hanhan
                hanhan:{

                } */
                // 获取焦点 focus
                // 失去焦点 blur
                focus:{
                    inserted(el){
                        el.focus();
                    }
                }
            }
        })
        /* 
        自定义指令时常用的函数 bind inserted
        bind inserted   
        bind在inserted之前
        bind在DOM绘制之前


    
        
        
        */

        const vm_app = new Vue({
            el:'.app',
            data:{
                str:'fewrgthytu',
                str1:"FAERGRGRGRG"
            }
        })
    </script>
</body>
</html>